import React, { Component } from 'react'
import { Table, Divider, Button, Modal, Input, message, Popconfirm } from 'antd'

const { Search } = Input;

export default class Crud extends Component {
    state = {
        // 编辑弹框flag
        visibleEdit: false,
        // 添加弹框flag
        visible: false,
        // 添加内容
        form: {
            name: "",
            short: "",
            num: null
        },
        // 编辑数据
        formEdit: {},
        data: [
            {
                key: '1',
                name: '前端',
                short: "frontEnd",
                num: 2
            },
            {
                key: '2',
                name: '后端',
                short: "backEnd",
                num: 3
            },
            {
                key: '3',
                name: '工具',
                short: "tool",
                num: 10
            }
        ],
        columns: [
            {
                // 表头内容
                title: '名称',
                // 控制列表展示属性
                dataIndex: 'name',
                // 唯一值
                key: 'name',
                // 渲染视图
                render: text => <a>{text}</a>,
            },
            {
                title: '缩写',
                dataIndex: 'short',
                key: 'short',
            },
            {
                title: '数量',
                dataIndex: 'num',
                key: 'num',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record, index) => (
                    <span>
                        <Button onClick = {() => {
                            this.setState({
                                visibleEdit: true,
                                formEdit: text
                            })

                        }} type="primary">编辑</Button>
                        <Divider type="vertical" />
                        {/*  气泡确认框 */}
                        <Popconfirm
                            title="确定要删除嘛?"
                            onConfirm={() => {
                                this.confirm(index)
                            }}
                            onCancel={this.cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button danger type="primary">删除</Button>
                        </Popconfirm>

                    </span>
                )
            }
        ]
    }

    confirm = (index) => {
        this.delItem(index)
        message.success('删除成功');
    }

    cancel = (e) => {
        message.error('取消删除');
    }

    // 删除列表
    delItem = (index) => {
        let data = [...this.state.data]
        data.splice(index, 1)
        this.setState({
            data
        })
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    // 点击添加按钮确定
    handleOk = e => {
        this.state.form.key = Date.now()
        let data = [...this.state.data]
        data.push(this.state.form)
        this.setState({
            visible: false,
            data
        }, () => {
            message.success('添加成功')
        })
    }

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    // 模糊搜索
    search = (value) => {
        // filter
        let data = [...this.state.data]
        // includes (数组，字符串)  一般模糊搜索
        data = data.filter(item => item.name.includes(value))
        this.setState({
            data
        })
    }


    // 编辑弹框确定
    handleEditOk = e => {
        let data = [...this.state.data]
        data = data.map(item => {
            // 找到了要更新的数据
            if (item.key === this.state.formEdit.key) {
                return this.state.formEdit
            } else {
                return item
            }
        })

        this.setState({
            visibleEdit: false,
            data
        }, () => {
            message.success('编辑成功')
        })
    }

    // 编辑弹框取消
    handleEditCancel = e => {
        this.setState({
            visibleEdit: false
        }, () => {
            message.success('取消成功')
        })
    }
    render() {
        const { form, data, columns, visibleEdit, formEdit } = this.state
        const { name, short, num } = form
        return (
            <div>
                {/* 编辑 */}
                <div>
                    <Modal
                        title="编辑信息"
                        visible={visibleEdit}
                        onOk={this.handleEditOk}
                        onCancel={this.handleEditCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <p className="flex">
                            <span>
                                姓名：
                            </span>
                            <Input value={ formEdit.name} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.name = ev.target.value
                                this.setState({
                                    formEdit
                                })
                            }} />
                        </p>
                        <p className="flex">
                            <span>
                                缩写：
                            </span>
                            <Input value={ formEdit.short} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.short = ev.target.value
                                this.setState({
                                    formEdit
                                })
                            }} />
                        </p>
                        <p className="flex">
                            <span>
                                数量：
                            </span>
                            <Input value={ formEdit.num} onChange={(ev) => {
                                let formEdit = { ...this.state.formEdit }
                                formEdit.num = ev.target.value
                                this.setState({
                                    formEdit
                                })
                            }} />
                        </p>

                    </Modal>
                </div>








                {/* 查找 */}
                <Search placeholder="请输入搜索的内容" onSearch={(value) => {
                    this.search(value)
                }} enterButton />

                {/* 添加按钮 */}
                <div>
                    <Button type="primary" onClick={this.showModal}>
                        添加
                    </Button>
                    <Modal
                        title="添加信息"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <p className="flex">
                            <span>
                                姓名：
                            </span>
                            <Input value={name} onChange={(ev) => {
                                form.name = ev.target.value
                                this.setState({})
                            }} />
                        </p>
                        <p className="flex">
                            <span>
                                缩写：
                            </span>
                            <Input value={short} onChange={(ev) => {
                                form.short = ev.target.value
                                this.setState({})
                            }} />
                        </p>
                        <p className="flex">
                            <span>
                                数量：
                            </span>
                            <Input value={num} onChange={(ev) => {
                                form.num = ev.target.value
                                this.setState({})
                            }} />
                        </p>

                    </Modal>
                </div>
                <Table columns={columns} dataSource={data} />
            </div>
        )
    }
}
